<template>
    <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.table.extend!.infoId ? true:false"
        @close="baTable.table.extend!.infoId = 0"
        width="50%"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">沟通记录</div>
        </template>
        <el-scrollbar ref="scrollbarRef" @scroll="debounce(onScroll, 300)($event)" v-loading="state.loading" id="session-scrollbar">
            <div class="history-box session-window">
                <template v-for="(message, index) in state.messages" :key="index">
                    <div class="datetime-box">
                        <el-tag class="datetime" type="info">{{ message.datetime }}</el-tag>
                    </div>
                    <div class="chat-records">
                        <div
                            class="chat-record-item"
                            v-for="(item, idx) in state.messages[index].data"
                            :key="idx"
                            :class="item.engineer_id > 0 ? 'you' : 'me'"
                        >
                            <div class="record-content-box">
                                <div class="chat-record-nickname">
                                    {{ item.engineer_id > 0 ? item.engineer_title : item.nickname }}
                                </div>
                                <div class="record-content">
                                    <template v-if="item.type == 0">
                                        <div class="text-content">
                                            <MdPreview class="message-md-content" :editorId="'content-' + idx" :modelValue="item.content" />
                                        </div>
                                    </template>
                                    <el-image
                                        class="record-img"
                                        :hide-on-click-modal="true"
                                        v-else-if="item.type == 1"
                                        :preview-src-list="[fullUrl(item.content)]"
                                        :src="fullUrl(item.content)"
                                    ></el-image>
                                    <el-link target="_blank" type="success" v-else-if="item.type == 2" :href="item.content">
                                        点击下载 {{ item.title ?? item.content }} 文件
                                    </el-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </el-scrollbar>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="baTable.table.extend!.infoId = 0">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, inject, reactive, watch, nextTick } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { records } from '/@/api/backend/workorder'
import { MdPreview } from 'md-editor-v3'
import { ScrollbarInstance } from 'element-plus'
import { debounce, fullUrl } from '/@/utils/common'

const baTable = inject('baTable') as baTableClass

const scrollbarRef = ref<ScrollbarInstance>()
const state: {
    loading: boolean
    messages: anyObj[]
    page: number
    nextPage: boolean
    scrollHeight: number
} = reactive({
    loading: false,
    messages: [],
    page: 1,
    nextPage: true,
    scrollHeight: 0,
})

const getRecords = () => {
    if (!state.nextPage) return
    state.loading = true
    records(baTable.table.extend!.infoId, state.page)
        .then((res) => {
            state.nextPage = res.data.nextPage
            if (state.page > 1) {
                for (const key in res.data.messages) {
                    state.messages.unshift(res.data.messages[key])
                }
                nextTick(() => {
                    const scrollHeightNew = document.querySelector('#session-scrollbar .el-scrollbar__view')!.scrollHeight
                    scrollbarRef.value!.scrollTo(0, scrollHeightNew - state.scrollHeight - 100)
                })
            } else {
                state.messages = res.data.messages
                if (!res.data.messages.length) {
                    state.messages.push({
                        datetime: '没有更多消息了',
                        data: [],
                    })
                }
                nextTick(() => {
                    scrollbarRef.value!.scrollTo(0, document.querySelector('#session-scrollbar .el-scrollbar__view')?.scrollHeight)
                })
            }
        })
        .finally(() => {
            state.loading = false
        })
}

const onScroll = ({ scrollTop }: { scrollTop: number }) => {
    if (scrollTop == 0) {
        state.scrollHeight = document.querySelector('#session-scrollbar .el-scrollbar__view')!.scrollHeight
        state.page++
        getRecords()
    }
}

watch(
    () => baTable.table.extend!.infoId,
    () => {
        if (baTable.table.extend!.infoId > 0) {
            state.messages = []
            state.page = 1
            state.nextPage = true
            getRecords()
        }
    }
)
</script>

<style scoped lang="scss">
.message-md-content {
    background: transparent;
    :deep(.default-theme p) {
        padding: 0;
        line-height: 1.3;
    }
    :deep(.md-editor-preview-wrapper) {
        padding: 0;
        overflow: hidden;
    }
    :deep(.default-theme ul li) {
        margin: 0;
    }
}
.me {
    .message-md-content {
        :deep(.default-theme) {
            --md-theme-color: var(--el-color-white);
            --md-theme-code-inline-color: var(--el-color-black);
        }
    }
}
.history-box {
    .datetime-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
    }
}
.session-window {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    padding: 10px;
    background-color: #fdfdfd;
    .chat-records {
        height: 100%;
        margin-right: -10px;
        padding: 0;
        list-style: none;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        .chat-record-item {
            display: flex;
            padding-top: 16px;
            flex: 1;
            align-items: flex-start;
        }
        .record-content-box {
            position: relative;
            max-width: 75%;
            margin: 0 13px;
        }
        .me {
            flex-direction: row-reverse;
            display: flex;
            justify-content: flex-start;
            align-content: center;
            padding-right: 10px;
        }
        .chat-record-nickname {
            color: var(--el-text-color-secondary);
            padding-bottom: 3px;
        }
        .you .chat-record-nickname {
            text-align: left;
        }
        .you .record-content {
            color: #000;
            background: var(--el-color-info-light-9);
            .el-link {
                --el-link-text-color: var(--el-color-success);
            }
        }
        .me .chat-record-nickname {
            text-align: right;
        }
        .me .record-content {
            color: var(--el-color-white);
            background: var(--el-color-primary);
            .el-link {
                --el-link-text-color: var(--el-color-warning);
                &:hover {
                    --el-link-hover-text-color: var(--el-color-warning);
                }
            }
        }
        .you .record-content-box:before {
            left: -4px;
            background: var(--el-color-info-light-9);
        }
        .me .record-content-box:before {
            right: -4px;
            background: var(--el-color-primary);
        }
        .record-content-box:before {
            position: absolute;
            top: 26px;
            display: block;
            width: 8px;
            height: 6px;
            content: '\00a0';
            -webkit-transform: rotate(29deg) skew(-35deg);
            transform: rotate(29deg) skew(-35deg);
        }
        .record-content {
            font-size: 14px;
            color: var(--dark);
            padding: 12px 10px;
            border-radius: 5px;
            position: relative;
            width: auto;
            word-wrap: break-word;
            word-break: break-all;
            img {
                vertical-align: bottom;
                max-height: 200px;
                width: auto;
                height: auto;
                cursor: pointer;
                user-select: none;
                border: 1px solid transparent;
            }
            .text-content {
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>
